<template>
	<view class="taskdetails">
		<!-- 顶部搜索 -->
		<diyNavBar value='任务详情' color='#FF6F30'></diyNavBar>
		<!-- 内容 -->
		<view class="background"></view>
		<!-- 额度信息 -->
		<view class="information">
			<view class="info-tips">
				<view class="info-tips-content" @click="$util.redirectTo('/pages/member/member')">
					<text class="tips-content-txt"
						v-if="getdata.memebrlevels">升级{{getdata.memebrlevels.title}}，多拿{{getdata.sjprice}}元赏金</text>
					<view class="tips-content-right">
						<text class="tips-content-txt">立即升级</text>
						<text class="iconfont icon-jinrujiantou"></text>
					</view>
				</view>
			</view>
			<view class="label">
				<view class="label-tips" v-if="getdata.tasksort">{{getdata.tasksort.title}}</view>
				<!-- <view class="label-tips-right">
					<view class="label-infoleft">赏</view>
					<text class="label-texts">{{getdata.sjprice}}元</text>
				</view> -->
			</view>
			<view class="information-top">
				<image :src="$util.img(getdata.file)" mode=""></image>
				<view class="top-center">
					<text class="centerText">{{getdata.name}}</text>
					<view class="centerNum">
						<view class="num">任务编号：{{getdata.num}}</view>
						<text class="copy" @click="$util.copy(getdata.num)">复制</text>
					</view>
				</view>
				<text class="money" v-if="!zpid">￥{{getdata.price}}元</text>
			</view>
			<view class="numTime">
				<view class="numTime-item">
					<text class="num">{{getdata.surplus}}</text>
					<text class="name">数量</text>
				</view>
				<view class="numTime-item">
					<text class="num">{{getdata.sales}}</text>
					<text class="name">完成数量</text>
				</view>
				<view class="numTime-item">
					<text class="num">{{getdata.making_time}}小时</text>
					<text class="name">做单时长</text>
				</view>
				<view class="numTime-item">
					<text class="num">{{getdata.examine}}天</text>
					<text class="name">审核时间</text>
				</view>
			</view>
		</view>
		<!-- 介绍 -->
		<view class="introduce">
			<block>
				<view class="explain">做单说明</view>
				<view class="introduce-item" v-html="getdata.context">
				</view>
			</block>
			<block>
				<view class="explain1">任务说明</view>
				<view class="introduce-item" v-html="getdata.task_context">
				</view>
			</block>
		</view>
		<!-- radio视频演示 -->
		<view class="new-radioBody" v-if="getdata.rwstatus == 0" @click="$util.redirectTo('/pages/myshop/myshop',{id:1})">
			<text class="text">ID:{{getdata.num}}</text>
			<text class="text">平台自营</text>
		</view>
		<view class="new-radioBody" v-if="getdata.rwstatus == 1" @click="$util.redirectTo('/pages/myshop/myshop',{id:2,member_id:getdata.member_id})">
			<text class="text">ID:{{getdata.num}}</text>
			<text class="text">用户昵称：{{getdata.nickname}}</text>
		</view>
		<!-- 步骤 -->
		<view class="step">
			<view class="title">
				做单步骤<text>（请参照以下步骤做单）</text>
			</view>
			<view class="step-item step-item-top" v-for="(item,index) in getdata.making_context" :key="index">
				<view class="top">
					<view class="new-add-class">
						<text class="text1">{{index + 1}}</text>
						<text class="text2">{{item.textarea}}</text>
					</view>
					<block>
						<button type='default' class='button' v-if="item.name == 'addCode'"
							@click="select('preservation',item.img)">保存扫码</button>
					</block>
				</view>
				<view class="bottom " :class="item.name == 'addCode'?'code':''">
					<block v-if="item.inputJudge && item.name != 'addUrl'">
						<view class="inputText">
							<view class="txt">{{item.inputText}}</view>
						</view>
						<button type='default' class='buttonLink link2 copy'
							@click="select('copyurl',item.inputText)">复制数据</button>
					</block>
					<block v-if="item.name == 'addUrl'">
						<button type='default' class='buttonLink link1' v-if="item.open"
							@click="select('openurl',item.inputText)">打开链接</button>
						<button type='default' class='buttonLink link2' v-if="item.copy"
							@click="select('copyurl',item.inputText)">复制链接</button>
					</block>
					<block v-if="item.imgJudge && item.img && item.img.length">
						<div v-if="item.name == 'addCode' && getdata.btstatus == 0" class='codeBackground'>报名查看</div>
						
						<image v-if="item.name == 'addCode'" class="image"
							:src="typeof item.img  == 'string'?$util.img(item.img):$util.img(item.img[0])" mode="" @click="previewImage(item.img)">
						</image>
						<view class="new-image" v-else-if="item.name == 'addImageText'">
							<view class="image-text">
								<text>图文说明</text>
							</view>
							<block v-for="(i,k) in item.img">
								<image class="image" :src="$util.img(i)" mode="" @click="previewImage(i)">
								</image>
							</block>
						</view>
						<view class="new-imagelc" v-else-if="item.name == 'addVerification'">
							<view class="image-text">
								<text>验证图</text>
							</view>
							<block v-for="(i,k) in item.img">
								<image class="image" :src="$util.img(i)" mode=""  @click="previewImage(i)"></image>
							</block>
							<block v-if="item.addimg">
								<view class="bottom link input die">
									<view class="dieimage" >
										<view class="itembox" v-for="(v,n) in item.addimg" :key='n'>
											<view class="image-text">
												<text>交付图</text>
											</view>
											<image :src="$util.img(v)" mode="widthFix"  @click="previewImage(v)"></image>
<!-- 											<text v-if="getdata.btstatus == 1" class="delete iconfont icon-jiufuqianbaoicon08"
												@click="deleteImg(index,n)"></text> -->
										</view>
									</view>
								</view>
							</block>
							<!-- <view class="box-button" v-if="getdata.btstatus == 1">
								<button type='default' class='button btnlc' @click="select('addimg','',index)">
									<view class="btn1"> + </view>
									<view>添加图片</view>
								</button>
							</view> -->
						</view>
					</block>
				</view>
			</view>
			<block v-if="getdata.making_context && getdata.btstatus != 0">

				<!-- 提交成功 -->
				<view class="step-item step-item-top">
					<view class="top">
						<view class="new-add-class">
							<text class="text1">{{getdata.making_context.length + 1}}</text>
							<text class="text2">
								<text v-if="getdata.tj_description==null">提交姓名+手机号</text>
								<text v-else>{{getdata.tj_description}}</text>
							</text>
						</view>
					</view>
					<view class="bottom link input die">
						<view class="inputText">
							<input v-if="!getdata.ordercontexts && getdata.tj_description!=null" type="text" v-model="value"
								:placeholder="getdata.tj_description" />
								
								<input v-if="!getdata.ordercontexts && getdata.tj_description==null" type="text" v-model="value"
									placeholder="请根据提示输入相关内容" />
								
							<text class="" v-else>{{getdata.ordercontexts}}</text>
						</view>
					</view>
				</view>
			</block>
		</view>
		<!-- 确认 -->
		<view class="confirm">
			<view class="confirm-left" @click="shuaxinJudge">
<!-- 				<text class="iconfont icon-shuaxin" :class="transitionJudge?'transition':''"></text>
				<text>换一个</text> -->
			</view>
			<button type="default" v-if="getdata.btstatus == 1">不合格</button>
			<button type="default" @click="$refs.openpopup.open()" v-else-if="getdata.btstatus == 2">审核中</button>
			<button type="default" v-else-if="getdata.btstatus == 3">已完成</button>
		</view>
		<loading-cover ref="loadingCover"></loading-cover>
		<!-- <diyVideo ref='stepPopup' :src='src'></diyVideo> -->
		<uni-popup ref="openpopup" type="center">
			<view class="openpopup">
				<view class="title">
					<text class="p-title">选择状态:</text>
					<view class="rr-box" @click="btstatus = 2" >
						<view class="rr-radio" :style="{
							'background':btstatus == 2 ? '#FF6F30' : 'none'
						}"></view>
					</view>
					<text class="rr-txt">不合格</text>
					<view class="rr-box"  @click="btstatus = 3">
						<view class="rr-radio" :style="{
							'background':btstatus == 3 ? '#FF6F30' : 'none'
						}"></view>
					</view>
					<text class="rr-txt">已完成</text>
				</view>
				<view class="textarea" v-if="btstatus == 2">
					<textarea placeholder="请输入不合格理由" v-model="textarea"></textarea>
				</view>
				<view class="p-btn">
					<view class="p-item" @click="$refs.openpopup.close()">取消</view>
					<view class="p-item p-hover" @click="btnopen">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import diyNavBar from '../../component/diy-nav/diy-navbar.vue'
	import loadingCover from '../../component/loading-cover/loading-cover.vue'
	import diyVideo from '../../component/diy-video/diy-video.vue'
	import task from './js/taskstep.js'
	export default {
		components: {
			diyNavBar,
			loadingCover,
			diyVideo
		},
		mixins: [task],
		data() {
			return {
				btstatus:2,
				textarea:'',
				src: 'https://www.bilibili.com/e6c96ffd-af08-4343-bdf2-ee3d8faf587f',
				getdata: {}, //数据初始化
				value: "", //提交报名之后提交后台的数据
				numTimeList: [{
					num: '1020',
					name: '数量'
				}, {
					num: '2小时',
					name: '做单时长'
				}, {
					num: '七天',
					name: '审核时间'
				}],
				introduce: [{
					title: '做单说明',
					List: [
						'1.任务奖金已托管到平台，赚钱有保障',
						'2.请先报名再做任务，否则无赏金',
						'3.需要打钱，投资的悬赏请谨慎，否则后果自负',
						'4.有奖举报：发现同类平台任务单，拉人，线下交易者找客服举报重奖'
					]
				}, {
					title: '任务说明',
					List: [
						'扫码输入手机号领取，查看额度，上传身份证正反面，绑定银行卡，人脸认证完成，几分钟后出审核结果，出额度交单即可，没出额度不合格。',
					]
				}],
				//换一个动画
				transitionJudge: false,
				// 防止重复提交
				judgeIndex: false,
				setImage: [],
				id: 0,
				demoListIndex: '', //属于第几个
				zpid: {},
				task_order_id: '',
				//验证图数组
				VerificationList: []
			}
		},
		onLoad(option) {
			option.id ? this.id = option.id : '';
			if (option.task_order_id) {
				this.task_order_id = option.task_order_id;
			}
			this.getData();
			this.zpid = uni.getStorageSync('zpid');
		},
		onShow() {
			setTimeout(()=>{
				console.log("this.making_context",this.getdata.making_context)
			},1000)
		},
		onReady() {

		},
		methods: {
			// imgbig(src){
			// 	var index = 0;
			// 	console.log('src',src)
			// 	console.log('this.getdata.making_context',this.getdata.making_context)
			// 	this.getdata.making_context.map(res=>{
			// 		console.log('res',res)
			// 		if(res.img == src){
			// 			index = res.index
			// 		}
					
			// 	})
			// 	uni.previewImage({
			// 		current:index,
			// 		urls:this.getdata.making_context
			// 	})
			// },
			previewImage(img) {
				console.log(img);
				uni.previewImage({
					urls: [img],
					longPressActions: {

						success: function(data) {

						},
						fail: function(err) {

						}
					}
				});
			},
			//删除图片
			deleteImg(index,i) {
				// this.setImage.splice(index, 1)
				this.getdata.making_context[index].addimg.splice(i,1);
				this.$forceUpdate()
			},
			//提交数据
			btn(type) {
				let url = '/task/' + type
				this.setImage = [];
				let imgdata = JSON.parse(JSON.stringify(this.getdata.making_context))
				if(imgdata.length){
					imgdata.forEach(item=>{
						if(item.name == "addVerification" && item.addimg){
							let imgarr = JSON.parse(JSON.stringify(item.addimg));
							this.setImage = this.setImage.concat(imgarr);
						}
					})
				}

				let data = {};
				if (type == 'TjTask' && this.value == '') {
					uni.showToast({
						title: '请填写手机号',
						icon: 'none'
					})
					return;
				}
				setTimeout(()=>{
					console.log("this.setImage",this.setImage)
				},1000)
				if (type == 'TjTask' && this.setImage.length == 0) {
					uni.showToast({
						title: '请上传图片',
						icon: 'none'
					})
					return;
				}
				console.log("this.setImage",this.setImage)
				switch (type) {
					case 'BmTask':
						data.task_id = this.getdata.id
						data.price = this.getdata.price
						break;
					case 'TjTask':
						data.task_order_id = this.getdata.task_order_id
						if (this.setImage.length) {
							this.setImage = this.setImage.map(item => {
								return item.split('uploads')[1]
							})
						}
						data.image = this.setImage.length ? this.setImage.join(',') : ''
						data.context = this.value
						break;
				}
				if (this.judgeIndex) return false;
				this.judgeIndex = true;
				this.$http.sendrequest(url, data, {
					tokenJudge: true
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					this.judgeIndex = false;
					if (res.code == 1) {
						this.value = '';
						this.getData()
						if (type == 'BmTask') {
							setTimeout(() => {
								uni.showModal({
									title: '提示',
									content: '报名成功,是否开始当前任务',
									success: res => {
										if (res.cancel) {
											this.$util.redirectTo(
												'/pages/tasklist/tasklist', {},
												'redirectTo')
										}
									}
								});
							}, 1000)
						}

						if (type == 'TjTask') {
							this.setImage = []
						}
					} 
					// else {
					// 	if (res.msg.indexOf('实名认证') != -1) {
					// 		setTimeout(() => {
					// 			this.$util.redirectTo('/pages/realname/realname', {}, '')
					// 		}, 1000)
					// 	}
					// }
				})
			},
			gotos() {
				// // #ifdef APP
				// plus.runtime.openURL(this.getdata.sp_url); 
				// // #endif
				// // #ifdef H5
				// // location.href = this.getdata.sp_url;
				// // #endif
				this.$refs.stepPopup.open();
			},
			//控制旋转
			shuaxinJudge() {
				if (this.transitionJudge) return false;
				this.transitionJudge = true;
				this.$http.sendrequest('/RefreshTask/RefreshRecord', {}, {
					tokenJudge: true
				}).then(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					this.transitionJudge = false;
					if (res.code == 1) {
						this.id = res.data.id
						this.getData()
					}
				})
			},
			//初始化获取数据
			getData() {
				let data = {
					id: this.id
				}
				if (this.task_order_id) {
					data.task_order_id = this.task_order_id
				}
				this.$http.sendrequest('/task/Taskxsinfo', data).then(res => {
					if (res.code == 1) {
						this.getdata = res.data;
						this.getdata.making_context = JSON.parse(this.getdata.making_context);
						if (this.getdata.ordercontexts) this.value = this.getdata.ordercontexts;
						if (this.getdata.orderimages && this.getdata.orderimages.length) this.setImage = this
							.getdata.orderimages;
						this.getVerification();
						this.$refs.loadingCover.hide();
						this.$forceUpdate()
					}
				})
			},
			// 剥离验证图
			getVerification() {
				console.log(this.getdata.making_context);
				var three = [];
				var numlist = [];
				var list = [];
				for (var i = 0; i < this.getdata.making_context.length; i++) {
					if (this.getdata.making_context[i].name != 'addVerification') {
						list.push(this.getdata.making_context[i])
					} else {
						this.getdata.making_context[i].addimg = JSON.parse(JSON.stringify(this.getdata.orderimages))
						numlist.push(this.getdata.making_context[i])
					}
				}
				numlist.map(res => {
					list.push(res)
				})
				console.log('list的数据',list)
				this.getdata.making_context = list;
			},
			//提交验证
			btnopen(){
				this.$http.sendrequest('/TaskOrder/TaskOrderSh', {
					status:this.btstatus,
					task_order_id:this.task_order_id,
					explain:this.textarea
				}).then(res => {
					uni.showToast({title:res.msg,icon:'none'})
					if(res.code == 1) {
						this.getData();
						this.$refs.openpopup.close()
					}
				})
			}
		},

	}
</script>

<style lang="scss">
	@import './css/taskdetails.scss';
	.openpopup{
		width: 70vw;
		min-height: 200rpx;
		background: #fff;
		border-radius: 20rpx;
		padding:40rpx 40rpx 30rpx;
		.title{
			display: flex;
			align-items: center;
			// justify-content: center;
			.p-title{
				font-size: 26rpx;
			}
			.rr-box{
				padding: 6rpx;
				border: 1rpx solid rgba(0,0,0,.2);
				border-radius: 50%;
				margin-left: 20rpx;
				.rr-radio{
					background: #FF6F30;
					border-radius: 50%;
					width: 10rpx;
					height: 10rpx;
				}
			}
			.rr-txt{
				font-size: 26rpx;
				margin-left: 10rpx;
			}
		}
		.textarea{
			min-height: 200rpx;
			width: 100%;
			border-radius: 10rpx;
			padding: 10rpx;
			box-sizing: border-box;
			border: 1rpx solid rgba(0,0,0,.2);
			margin-top: 30rpx;
			textarea{
				width: 100%;
				height: 100%;
				font-size: 24rpx;
			}
		}
		.p-btn{
			margin: 40rpx 0 10rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.p-item{
				width: 160rpx;
				height: 60rpx;
				border-radius: 6rpx;
				text-align: center;
				line-height: 60rpx;
				border: 1rpx solid rgba(0,0,0,.2);
				font-size: 26rpx;
			}
			.p-hover{
				background: #FF6F30;
				color: #fff;
				border: none;
			}
		}
	}
</style>
